<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
    <title>随访单（医生）</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/im.css">
    <style>
        html,
        body {
            height: 100%;
            /* overflow: hidden; */
            background: #fff;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div>
            <div class="care_one">
                <span>1 你当下身体感觉如何？</span>
                <div>
                    <div class="recovery">
                        <span>
                            <span class="care_active"></span>
                        </span>
                        <span>痊愈</span>
                    </div>
                    <div class="okey_most">
                        <span>
                                <span class="care_active"></span>
                        </span>
                        <span>明显好转</span>
                    </div>
                    <div class="okey_half">
                        <span>
                                <span class="care_active"></span>
                        </span>
                        <span>部分好转</span>
                    </div>
                    <div class="no_change">
                        <span>
                                <span class="care_active"></span>
                        </span>
                        <span>无变化</span>
                    </div>
                    <div class="disobedient">
                        <span>
                                <span class="care_active"></span>
                        </span>
                        <span>未按医嘱服药</span>
                    </div>
                </div>
            </div>
            <div class="care_two">
                <span>2 已改善方面？</span>
                <div class="ad_in care_wel">
                    <textarea placeholder="服药后已改善的方面请在此填写" disabled="disabled"></textarea>
                </div>
            </div>

            <div class="care_two">
                <span>3 未改善方面？</span>
                <div class="ad_in care_wel">
                    <textarea placeholder="服药后没有改善的方面请在此填写" disabled="disabled"></textarea>
                </div>
            </div>
            <div class="care_two">
                <span>4 新增症状</span>
                <div class="ad_in care_wel">
                    <textarea placeholder="如出现新的症状，请在此填写" disabled="disabled"></textarea>
                </div>
            </div>

            <div class=" care_five">
                <p>5 请上传舌苔和舌底照片，如用户是儿童可上传 三关手纹照片替代
                </p>
            </div>
            <div class="care_five2 ">
                <span>注：</span>
                <span>1、请在自然光下拍摄；2、不要打开美颜功能；3、尽量张大嘴巴；</span>
            </div>
            <div class="ad_upload">
                <!-- <div class="upimg">
                    <img src="" alt="">
                    <span class="close_the"></span>
                </div> -->
                <div class="add_upload">
                    <!-- <input type="file" name="file" id="cameraInput" class="file" value="" accept="image/*" multiple /> -->
                </div>
            </div>
        </div>
        <div class="footer_dw">下一步</div>
        <div class="popups">
            <div class="backg"></div>
            <!-- 如果是安卓，自定义上传控件 -->
            <div class="android_up">
                <div class="a_u_title">
                    <span>图片</span>
                    <span></span>
                </div>
                <div class="camera_a">
                    <span class="camera_i"></span>
                    <span>相机</span>
                    <input type="file" name="file" id="cameraInput1" class="file" value="" accept="image/*" capture='camera'>
                </div>
                <div class="album">
                    <span class="album_i"></span>
                    <span>相册</span>
                    <input type="file" name="file" id="cameraInput2" class="file" value="" accept="image/jpeg,image/jpeg,image/png,image/bmp" multiple />
                </div>
            </div>
        </div>
    </div>

    <script src="js/jquery-1.8.3.js"></script>
    <script src="js/im.js"></script>
    <script>
        $(".care_one div div").click(function() {
            $(this).siblings().children().find(".care_active").css({
                "-webkit-transform": "scale(0, 0)",
                "transform": "scale(0, 0)"
            })
            $(this).children().find(".care_active").css({
                "-webkit-transform": "scale(1, 1)",
                "transform": "scale(1, 1)"
            })
        })


        var u = navigator.userAgent;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        var base64s = [];
        if (isiOS) {
            $(".add_upload input").show();
        } else if (isAndroid) {
            // alert("an")
            $(".add_upload input").hide();
            $(".add_upload").click(function() {
                popupShow(".android_up", true)
            })
        }
        $('#cameraInput').change(function() {
            var file = document.getElementById('cameraInput').files[0];
            drawOnCanvas(file, 'head_img1');
            popupShow(".android_up", false);
        });
        $('#cameraInput1').change(function() {
            var file = document.getElementById('cameraInput1').files[0];
            drawOnCanvas(file, 'head_img1');
            popupShow(".android_up", false);
        });
        $('#cameraInput2').change(function() {
            var file = document.getElementById('cameraInput2').files[0];
            drawOnCanvas(file, 'head_img1');
            popupShow(".android_up", false);
        });

        function drawOnCanvas(file, num) {
            var reader = new FileReader();
            var str = "";
            reader.onload = function(e) {
                var dataURL = e.target.result,
                    canvas = document.createElement('canvas'),
                    ctx = canvas.getContext('2d'),
                    img = new Image();
                img.onload = function() {
                    var w = img.width,
                        h = img.height;
                    canvas.width = w / 2;
                    canvas.height = h / 2;
                    var context = canvas.getContext('2d');
                    context.drawImage(img, 0, 0, w / 2, h / 2);
                    var base64 = canvas.toDataURL('image/jpeg', 1);
                    $.ajax({
                        type: "post",
                        url: "http://ww.lehuo100.com/doctor_ajax.php?do=doctorimgup",
                        data: {
                            "base64": base64,
                        },
                        dataType: "json",
                        beforeSend: function(XMLHttpRequest) {},
                        success: function(res) {
                            console.log(res)
                                // loading(false);
                            if (typeof res == 'string') {
                                res = JSON.parse(res)
                            }
                            str += "<div class='upimg'><img  src=" + base64 + "><span  data-src=" + res.sec + " class = 'close_the' > </span></div > "

                            base64s.push(res.sec)
                            console.log(base64s)
                            $(".ad_upload").append(str);

                            $(".up_example").remove();
                            var se = $(".upimg").size()
                            if (se > 2) {
                                $(".add_upload").hide()
                            }
                            $(".upimg span").click(function() {
                                $(this).parent().remove();
                                var src_r = $(this).attr("data-src");
                                var index = $.inArray(src_r, base64s);
                                base64s.splice(index, 1);
                                if (se < 2) {
                                    $(".add_upload").show()
                                }
                            })

                        },
                        error: function(err) {
                            layer.msg('连接服务器失败', {
                                time: 1000
                            });
                        }
                    });
                };
                img.src = dataURL;
            };
            reader.readAsDataURL(file);
        }

        function popupShow(el, bool) {
            if (bool) {
                $(".backg").css({
                    "opacity": ".5",
                    "z-index": "2000"
                }).show();
                $(el).show();
            } else {
                setTimeout(function() {
                    $(".backg").css({
                        "opacity": "0",
                        "z-index": "-2000"
                    }).hide();
                }, 100);
                $(el).hide();
            }
        }
    </script>
</body>

</html>